<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<table id="test">
	</table>
	<script type="text/javascript" src="../../../../static/Plugins/FlatUI/js/vendor/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			var subtitle = [
				{"lable":"first1",
					"sub":[
						{"lable":"sub1"},
						{"lable":"sub2"},
						{"lable":"sub3"}
					]
				},
				{"lable":"first2",
					"sub":[
						{"lable":"sub4"},
						{"lable":"sub5"},
						{"lable":"sub6"},
						{"lable":"sub7"}
					]},
				{"lable":"first3",
					"sub":[
						{"lable":"sub8"},
						{"lable":"sub9"}
					]
				},
				{"lable":"first4",
					"sub":[
					]},
				{"lable":"first5",
					"sub":[
					]},
				{"lable":"first6",
					"sub":[
						{"lable":"sub11"},
						{"lable":"sub12"},
						{"lable":"sub13"}
					]},
				{"lable":"first7",
					"sub":[
					]}
			];
			var deep = 2;
			var firsttr = [];
			var subtr = [];
			$.each(subtitle,function(first,f){
				if (f.sub && f.sub.length > 0) {
					firsttr.push({"lable":f.lable,"colspan":f.sub.length,"rowspan":1});
					$.each(f.sub,function(second,s){
						subtr.push({"lable":s.lable,"colspan":1,"rowspan":1});
					});
				} else {
					firsttr.push({"lable":f.lable,"colspan":1,"rowspan":deep});
				}
			});
			var html = "";
			$.each(firsttr,function(index,item){
				html += '<th colspan="'+item.colspan+'" rowspan="'+item.rowspan+'">'+ item.lable+'</th>';
			});
			$('#test').append('<tr>'+html+'</tr>');
			html = "";
			$.each(subtr,function(index,item){
				html += '<th>'+ item.lable+'</th>';
			});
			$('#test').append('<tr>'+html+'</tr>');
		});
	</script>
</body>
</html>